<template>
  <div class="banner-outer">
    <div class="list_box1">
      <div class="list_box_but1">
        <el-upload
          ref="uploadRef"
          class="upload"
          :action="getUrl('/banner/add')"
          :auto-upload="true"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
          <el-button type="primary">添加轮播图</el-button>
        </el-upload>
      </div>

      <div class="list_table">
        <el-table
          :height="tableHeight"
          size="small"
          :data="tableData"
          stripe
          :header-cell-style="{ background: '#EEF1F6' }"
        >
          <el-table-column
            label="ID"
            prop="id"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column label="轮播图片" prop="pic" align="center">
            <template v-slot="scope">
              <div class="singer-img">
                <img
                  :src="getUrl(scope.row.bannerUrl)"
                  style="height: 100px; object-fit: contain"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template v-slot="scope">
              <div class="operate">
                <el-upload
                  ref="uploadRef"
                  class="upload"
                  :action="getUrl('/banner/update')"
                  :data="{ id: scope.row.id }"
                  :auto-upload="true"
                  :show-file-list="false"
                  :on-success="uploadSuccess"
                >
                  <el-button>修改图片</el-button>
                </el-upload>
                <el-popconfirm
                  title="删除不可恢复，是否确定删除?"
                  @confirm="deleteRow(scope.row.id)"
                >
                  <template #reference>
                    <el-button type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getBanners, delBanner } from "@/api";
import { getUrl } from "@/utils copy/format";

const tableData = ref([]); // 记录歌曲，用于显示
const tableHeight = ref(0);
tableHeight.value = window.innerHeight - 140;

const uploadSuccess = () => {
  set();
};

// 删除图片
function deleteRow(id: any) {
  delBanner(id).then(() => {
    ElMessage.success("删除成功");
    set();
  });
}

async function set() {
  tableData.value = [];
  const banners = await getBanners();
  tableData.value = banners;
}
onMounted(() => {
  set();
});
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  margin-right: 4px;
}

:deep(.el-table__cell) {
  border-bottom: none !important;
}

.inner_icon {
  fill: #4d70ff;
  margin-right: 2px;
}

.inner_icon:hover {
  fill: #2d56fa;
}

.banner-outer {
  padding-bottom: 10px;
}

.list_box1 {
  text-indent: 0;
  background: #fff;
  border-radius: 4px;
  overflow: auto;
}
.list_box_but,
.list_table {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
.list_box_but1 {
  margin-top: 18px;
  margin-left: 20px;
}
.list_box_but a {
  color: #fff;
}
.list_pagination {
  //padding-top: 14px;
  text-indent: 0;
  > div {
    justify-content: flex-end;
    margin-right: 20px;
  }
}
.operate {
  display: flex;
  justify-content: center;
  align-items: center;
  .upload {
    margin-right: 2px;
  }
}
.singer-img {
  width: 300px;
  display: inline-block;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
